<!--这是添加产品分类组件-->
<template>
  <div style="padding-bottom: 30px;">
    <p class="filter"></p>
    <div class="addBox">
      <h3 class="fixTitle">
        <span v-if="catData.ncId">编辑</span>
         <span v-else>新增</span>
        <p>
          <em style="cursor: pointer;" @click="close">
            <svg-icon icon-class="cha" class="font-size16"/>
          </em>
        </p>
      </h3>
      <el-form :model="catData" :rules="rules" ref="postForm" label-width="140px" label-position="right"
               style="margin-top: 40px;">
        <el-form-item label="选择分类：" v-if="!catData.ncId">
          <el-radio-group v-model="catData.type" @change="radioChange">
            <el-radio label="1" :disabled="catData.ncId ? true : false">一级分类</el-radio>
            <el-radio label="2" :disabled="catData.ncId ? true : false">二级分类</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择一级类别：" v-if="catData.type=='2'" prop="parentId">
          <el-select v-model="catData.parentId" placeholder="请选择" style='width:300px;'>
            <el-option v-for="item in category" :key="item.ncId" :label="item.name" :value="item.ncId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称：" prop="name">
          <el-input :maxlength=10 v-model="catData.name" placeholder="请输入名称，最多10个字" class="width300"></el-input>
        </el-form-item>
        <el-form-item v-if="catData.type=='2'" label="简介" prop="desc">
          <el-input :maxlength=50 v-model="catData.desc" placeholder="请输入分类简介，最多50个字" class="width300"></el-input>
        </el-form-item>
        <el-form-item label="顺序：">
          <el-input type="number" min="0" v-model="catData.sort" placeholder="请输入" class="width300"
                    @keyup.native="catData.sort=isNum(catData.sort)"></el-input>
        </el-form-item>
        <!-- <el-form-item label="分类图片：" v-if="catData.type=='1'" required>
          <el-upload
            class="upload-demo width300"
            ref="upload"
            name="avatar"
            :action="URLAPI + '/common/goodsCat/imageUpload'"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="catData.fileList"
            list-type="picture"
            :on-success="handleAvatarSuccess"
            :limit="1"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary" @click="beforeChoose">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div class="point">建议图片宽200px,高小于300px</div>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="分类图片：" v-if="catData.type=='2'" required>
          <image-component class="fl" :image="catData.avatar" :width="'100px'" :height="'100px'"></image-component>
          <el-button  class="fl" type="primary" icon="upload" style="bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
            更换图片
          </el-button>
          <image-cropper :width="200" :height="200" url="/common/newsCat/imageUpload" @close='closeImageCropper'
                        @crop-upload-success="cropSuccess" langType="zh"
                        :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-edit" @click="catSave">保存</el-button>
          <el-button type="info" @click="close">关闭</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import imageComponent from '@/components/imageComponent'
  import ImageCropper from '@/components/ImageCropper'
  import { validateNumber } from '@/utils/validate'
  import { getCategory, catSave } from '@/api/news'
  export default {
    props: ['catData'],
    components: {
      imageComponent,
      ImageCropper
    },
    data() {
      return {
        category: [],
        URLAPI: process.env.BASE_API,
        rules: {
          name: [{ required: true, message: '请输入分类名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }],
          parentId: [{ required: true, message: '请选择一级类别', trigger: 'change' }]
        },
        imagecropperShow: false,
        imagecropperKey: 0 // 图片裁剪key
      }
    },
    mounted() {
      if (this.catData.ncId && this.catData.parentId != 0) {
        getCategory().then(res => {
          this.category = res.data.data
        }).catch(err => {
          console.log(err)
        })
      }
    },
    methods: {
      isNum(field) {
        return validateNumber(field)
      },
      radioChange(val) {
        this.$refs.postForm.clearValidate()
        if (this.catData.type == '2') {
          getCategory().then(res => {
            if (res.data.data.length > 0) {
              this.category = res.data.data
              this.catData.parentId = this.category[0].ncId
              return
            }
            this.$message({
              type: 'warning',
              message: '请先添加一级类目',
              duration: 3000
            })
            this.catData.type = '1'
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.catData.parentId = null
        }
        this.catData.name = null
        this.catData.sort = 0
      },
      catSave() {
        if (!this.catData.name) {
          this.$message({
            type: 'error',
            message: '必须填写名称！'
          })
          return
        }
        if (this.catData.type == 2) {
          if (this.catData.avatar == '' || this.catData.avatar == null) {
            this.$message({ message: '文件必传' })
            return
          }
          if (this.catData.desc.length < 3 ) {
            this.$message({ message: '请填写分类简介,3个字以上' })
            return
          }
        }
        var data = {
          data: {
            ncId: this.catData.ncId,
            name: this.catData.name,
            desc: this.catData.desc,
            parentId: this.catData.parentId,
            avatar: this.catData.avatar,
            sort: this.catData.sort
          }
        }
        catSave(data).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.close()
          this.$emit('saveCat')
        }).catch(err => {
          console.log(err)
        })
      },
      close() {
        this.$emit('hideAdd', false)
      },
      // submitUpload() {
      //   this.$refs.upload.submit()
      // },
      // handleRemove(file, fileList) {
      //   this.catData.avatar = null
      //   console.log(file, fileList)
      // },
      // handlePreview(file) {
      //   console.log(file)
      // },
      // handleAvatarSuccess(file) {
      //   this.catData.avatar = file.data.imageUrl
      // },
      // beforeChoose() {
      //   if (this.catData.avatar) {
      //     this.$message({ message: '更改上传图片，请先删除已有图片再上传' })
      //   }
      // },
      closeImageCropper() {
        this.imagecropperShow = false
      },
      cropSuccess(resData) {
        this.imagecropperShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.catData.avatar = resData.data.imageUrl
      }
    }
  }
</script>
<style scoped>
  p, h3 {
    margin: 0;
    padding: 0
  }

  .fixTitle {
    height: 36px;
    width: 560px;
    padding: 0 20px;
    z-index: 98;
  }

  .addBox {
    width: 560px;
    min-height: 300px;
    background: #fff;
    overflow: auto;
    position: fixed;
    left: 30%;
    top: 15%;
    z-index: 110;
  }

</style>
